JObj.use("Tween");

if(!JObj.Plugin) JObj.Plugin = {};
JObj.Plugin.JCarousel = {};
(function($){

    var JCarousel = function(width,height,body){

        var $ = this;

        var objs = {
            body : JObj.$(body) || document.body,
            outline : null ,
            ctxOutline : null,
            ctxInline : null,
            pagination: null,
            pagepoints: [],
            orgPage:null,
            panels : []
        }

        var vars = {
            skin : 'JCarouselDefault',
            panelCount : 0 ,
            idx : 0,
            preIdx : 0,
            t:0,
            b:0,
            c:0,
            d:100,
            time:null,
            interval:null,
            autorun: false
        }

        var next = function(){
            vars.idx ++;
            if(vars.idx >= vars.panelCount) vars.idx = 0;
            run();
        }

        var pre = function(){
            vars.idx --;
            if(vars.idx < 0) vars.idx = vars.panelCount - 1;
            run();
        }

        var runWith = function(idx){
            clearInterval(vars.interval);
            vars.idx = idx;
            run();
        }

        var run_ = function(){

            if(vars.t < vars.d){
                vars.t ++;
                objs.ctxOutline.scrollLeft = parseInt(Tween.Quart.easeOut(vars.t,vars.b,vars.c - vars.b, vars.d));
                vars.time = setTimeout(run_,10);
            }else{

            }
        }
        
        var run = function(){
            clearTimeout(vars.time);
            vars.t = 0;
            vars.b = objs.ctxOutline.scrollLeft;
            vars.c = objs.panels[vars.idx].offsetLeft;

            try{objs.orgPage.className = ""}catch(e){}

            var pagePoint = objs.pagepoints[vars.idx];
            pagePoint.className = "current";
            objs.orgPage = pagePoint;

            vars.preIdx = vars.idx;
            run_();
        }

        this.create = function(){
            var fg = document.createDocumentFragment();
            
            objs.outline = JObj.$c("DIV");
            fg.appendChild(objs.outline);
            objs.outline.className = vars.skin;
            JObj.Style.css(objs.outline,{width:width,height:height});

            var tl = JObj.$c("SPAN");
            objs.outline.appendChild(tl);
            tl.className = "tl";

            var tr = JObj.$c("SPAN");
            objs.outline.appendChild(tr);
            tr.className = "tr";

            var bl = JObj.$c("SPAN");
            objs.outline.appendChild(bl);
            bl.className = "bl";

            var br = JObj.$c("SPAN");
            objs.outline.appendChild(br);
            br.className = "br";

            objs.ctxOutline = JObj.$c("DIV");
            objs.outline.appendChild(objs.ctxOutline);
            objs.ctxOutline.className = "ctxOutline";

            objs.ctxInline = JObj.$c("DIV");
            objs.ctxOutline.appendChild(objs.ctxInline);
            objs.ctxInline.className = "ctxInline";

            var ctrlPanel = JObj.$c("DIV");
            objs.outline.appendChild(ctrlPanel);
            ctrlPanel.className = "ctrlPanel";

            var ctrlL = JObj.$c("SPAN");
            ctrlPanel.appendChild(ctrlL);
            ctrlL.className = "ctrlL";

            var ctrlC = JObj.$c("SPAN");
            ctrlPanel.appendChild(ctrlC);
            ctrlC.className = "ctrlC";

            objs.pagination = JObj.$c("DIV");
            ctrlC.appendChild(objs.pagination);
            objs.pagination.className = "pagination";

            var ctrlR = JObj.$c("SPAN");
            ctrlPanel.appendChild(ctrlR);
            ctrlR.className = "ctrlR";

            var btnL = JObj.$c("A");
            ctrlR.appendChild(btnL);
            btnL.className = "btnL";
            btnL.onclick = pre;
            btnL.href = "javascript:void(0)";


            var btnR = JObj.$c("A");;
            ctrlR.appendChild(btnR);
            btnR.className = "btnR";
            btnR.onclick = next;
            btnR.href = "javascript:void(0)";

            objs.body.appendChild(fg);
        }

        this.addPanel = function(panelID){
            var panel = JObj.$c("DIV");
            objs.ctxInline.appendChild(panel);
            panel.className = "panel";

            panelID = JObj.$(panelID);
            if(panelID) panel.appendChild(panelID);

            JObj.Style.css(objs.ctxInline,{width:(++vars.panelCount + 1) * 100 + '%'});
            JObj.Style.addRule("." + vars.skin + " .ctxOutline .ctxInline .panel","width:" + (100 / (vars.panelCount + 1)) + "%;");

            var page = JObj.$c("A");
            objs.pagination.appendChild(page);
            objs.pagepoints.push(page);
            page.href = "javascript:void(0)";
            page.onclick = JObj.doFunction(runWith,vars.panelCount - 1);

            objs.panels.push(panel);

            if(vars.panelCount == 1) run(0);
        }

        this.start = function(){
            vars.autorun = true;
            vars.interval = setInterval(next,3000);
        }

        this.stop = function(){
            vars.autorun = false;
            clearInterval(vars.interval);
        }
    }

    $.getInstance = function(width,height,body){
        JObj.Loader.loadCss(JObj.path + '/plugins/JCarousel/default/default.css');
        var jc = new JCarousel(width,height,body);
        jc.create();
        return jc;
    }

})(JObj.Plugin.JCarousel);